<template>
  <q-card class="no-shadow" bordered>
    <q-img :src="data.img" height="220px">
      <q-chip
        v-if="data.chip"
        :class="data.chip_class"
        :color="data.chip_color"
        :label="data.chip"
      ></q-chip>
    </q-img>

    <q-card-section>
      <q-btn
        fab
        color="teal-7"
        icon="fas fa-cart-plus"
        padding="sm"
        class="absolute"
        style="top: 0; right: 12px; transform: translateY(-50%)"
      />
    </q-card-section>

    <q-card-section>
      <div class="text-h6">
        {{ data.title }}
      </div>
      <div class="text-subtitle1 text-justify q-mt-sm">
        {{ data.caption }}
      </div>
      <div>
        <q-rating
          v-model="rating"
          max="5"
          size="1.5em"
          color="yellow"
          icon="star_border"
          icon-selected="star"
          icon-half="star_half"
          readonly
          no-dimming
        />
      </div>
    </q-card-section>
    <q-card-section>
      <div class="col-12">
        <span class="text-h6">{{ data.amount }}</span>
        <span class="text-h6 float-right">
          <q-btn label="查看详情" rounded color="secondary" outline></q-btn>
        </span>
      </div>
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface Props {
  // 菜单树
  data: {
    img: string;
    chip_class?: string;
    chip_color?: string;
    chip?: string;
    caption: string;
    title: string;
    rating: number;
    amount: string;
  };
}
const props = withDefaults(defineProps<Props>(), {});
const rating = ref(props.data.rating);
</script>

<style scoped></style>
